<template>
	<view class="container">
		<view class="action-buttons">
			<!-- 输入框，v-model 用于双向绑定，@blur 事件监听输入完成后执行搜索 -->
			<input v-model="moRenClass" @blur="search" :class="inputClass" placeholder="班级名" />
		</view>
		<view class="action-buttons">
			<u-button type="primary" style="background-color: skyblue;color: black;" @click="zhunBei()">准备</u-button>
			<u-button type="primary" @click="action()">开始</u-button>
			<u-button type="primary" style="background-color: green;" @click="out()">导出</u-button>
		</view>
		<text style="font-size: 40px;text-align: center;margin-left: 35%;">{{ selectedName }}</text>
		<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange" style="margin-top: 30rpx;">
			<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
				:label="item.name" :name="item.name" @change="radioChange" :size="50" :labelSize="50" :iconSize="40">
			</u-radio>
		</u-radio-group>
		<view class="action-buttons" style="margin-top: 40rpx;">
			<u-button type="primary" @click="action()">过关</u-button>
			<u-button type="warn" style="background-color: red;" @click="jiaRu()">失败</u-button>
		</view>
		<uni-table ref="table" border stripe emptyText="暂无更多数据" v-if="outportDialog">
			<uni-tr>
				<uni-th width="100" align="center">姓名</uni-th>
				<uni-th width="50" align="center">类型</uni-th>
			</uni-tr>
			<uni-tr v-for="(student, index) in chouStudents" :key="index">
				<uni-td align="center">
					<view class="name">{{ student.name }}</view>
				</uni-td>
				<uni-td align="center">{{ student.type }}</uni-td>
			</uni-tr>
		</uni-table>
		<!-- 表格展示 -->
		<!-- <uni-table ref="table" border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th width="50" align="center">学号</uni-th>
				<uni-th width="100" align="center">姓名</uni-th>
				<uni-th width="50" align="center">班级</uni-th>
			</uni-tr>
			<uni-tr v-for="(student, index) in students" :key="index">
				<uni-td align="center">{{ student.student_id }}</uni-td>
				<uni-td align="center">
					<view class="name">{{ student.name }}</view>
				</uni-td>
				<uni-td align="center">{{ student.student_class }}</uni-td>
			</uni-tr>
		</uni-table> -->
	</view>
</template>
<script>
	import * as XLSX from 'xlsx'; // 引入 xlsx 库
	export default {
		data() {
			return {
				students: [], // 学生列表
				moRenClass: uni.getStorageSync('默认班级') || '718', // 从缓存中读取默认班级
				outportDialog: false, //导出
				// 基本案列数据
				radiolist1: [{
						name: '概念',
						disabled: false
					},
					{
						name: '计算',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '概念',
				selectedName: '',
				md: [],
				chouStudents: [],
				inputClass: 'default-input', // 默认样式类
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			zhunBei() {
				// 提取学生名字时避免重复的名字，
				// let game = this.students.map(student => student.name);
				let game = Array.from(new Set(this.students.map(student => student.name)));
				uni.setStorageSync('抽奖名单', game);
				console.log('抽奖名单', game);
				uni.setStorageSync('失败名单', []);
				uni.showToast({
					title: '准备好了',
					icon: 'success'
				});
				console.log(game);
			},
			out() {
				this.outportDialog = true;
				this.chouStudents = uni.getStorageSync('失败名单');
			},
			jiaRu() {
				// 获取失败名单，如果没有则初始化为空数组
				let md = uni.getStorageSync('失败名单') || [];

				// 检查selectedName和radiovalue1是否有效
				if (this.selectedName && this.radiovalue1) {
					md.push({
						name: this.selectedName,
						type: this.radiovalue1
					});

					// 存储回本地存储
					uni.setStorageSync('失败名单', md);

					// 调用action()方法
					this.action();

					// 打印调试信息
					console.log("失败名单添加成功：" + this.selectedName); // 可选：用于调试，查看md数组的内容
				} else {
					console.log("请确保selectedName和radiovalue1都有有效值！");
				}
			},
			action() {
				let studentMd = uni.getStorageSync('抽奖名单');
				if (studentMd.length === 0) {
					uni.showToast({
						title: "没有更多的名字可以抽取！",
						icon: 'none'
					});
					return;
				}

				const randomIndex = Math.floor(Math.random() * studentMd.length);
				this.selectedName = `${studentMd[randomIndex]}`;

				// 如果需要从列表中移除已抽取的名字，可以取消下面注释
				studentMd.splice(randomIndex, 1);
				uni.setStorageSync('抽奖名单', studentMd);
			},
			// 搜索方法
			search() {
				console.log('搜索方法执行', this.moRenClass);
				uni.setStorageSync('默认班级', this.moRenClass); // 存储到本地缓存
				// 在这里可以执行你自己的搜索逻辑
				this.getData()
			},
			confirmImport() {
				console.log('正在访问:', this.importLink.url);
				// 访问链接获取数据的逻辑
				this.fetchAndParseExcel(this.importLink.url);
				this.importDialog = false
			},
			// 获取数据
			getData() {
				// this.$dbUtils.selectDataList('testDb', 'gradeStudents', {
				// 		'student_class': this.moRenClass
				// 	})
				this.$dbUtils.selectXmXhDataLike('testDb', 'gradeScores', ['name', 'student_id'], this.keyword, {
						'student_class': this.moRenClass
					})
					.then(results => {
						console.log("查询成功:", results);
						// 在这里处理查询结果
						this.students = results;
						uni.showToast({
							title: '查询成功',
							icon: 'success'
						});
					})
					.catch(error => {
						console.error("查询失败:", error);
					});
			},
			// 获取单个数据
		}
	};
</script>
<style scoped>
	/* 默认输入框样式 */
	.default-input {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		width: 100%;
		font-size: 14px;
	}

	/* 聚焦时的输入框样式 */
	.default-input:focus {
		border-color: #66afe9;
		outline: none;
		box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
	}

	/* 鼠标悬停时输入框样式 */
	.default-input:hover {
		border-color: #888;
	}

	.container {
		padding: 20rpx;
	}

	.action-buttons {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		/* 默认是row，可省略 */
		justify-content: space-between;
		/* 根据需要调整对齐方式 */
		gap: 10px;
		/* 按钮之间的间距 */
	}

	.student-table {
		margin-top: 20rpx;
	}

	.form-content {
		padding: 20rpx;
	}

	.delete-content {
		text-align: center;
		padding: 20rpx;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>